<template>
    <div id="app">
        <hello-world mapId="d3_"
                     :canvasWidth="canvasWidth"
                     :canvasHeight="canvasHeight"
                     :coordinate="realDataInfo.coordinate"
                     :region="region"
                     :regionName="item.region_name"
                     :reset="reset"
                     :equipment="equipment"
                     class="first-region"></hello-world>
    </div>
</template>

<script>
    import HelloWorld from './components/BlockMoveComponents.vue'

    export default {
        components: {
            HelloWorld
        },
        data() {
            return {
                realDataInfo: {
                    rotationAngle: {},
                    coordinate: {},
                    rtkStationData: [],
                    labelData: [],
                    uwbStationData: []
                },
                historyDataInfo: {
                    rotationAngle: {},
                    coordinate: {},
                    labelData: [],
                    rtkStationData: [],
                    uwbStationData: []
                },
                region: [],
                canvasWidth: 550,
                canvasHeight: 550,
                reset: "",
                item: {
                    "region_name": '12',
                },
                equipment: [],
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body{
        margin: 0;
    }

    .first-region {
        width: 80%;
        height: 400px;
    }
</style>
